<template>
  <!-- 背景图大盒子 -->
  <div class="box">
    <!-- 中间的柱子 -->
    <div class="box-nav">
      <!-- 中间的轮播图 -->
      <div class="box-navSwiper">
        <!-- 左边标签 -->
        <div class="box-navSwiper-left">
          <ul>
            <!-- class="active" -->
            <li
              v-for="item in getFirstCategorysList"
              :key="item.id"
              @mouseenter="mouseHover(item.id)"
              :class="item.id == cccId ? 'active' : ''"
            >
              <span>{{ item.categoryName }}</span>
              <el-icon class="icon"><ArrowRight /></el-icon>
            </li>
          </ul>
        </div>
        <div class="acitve-right" v-if="isShow" @mouseleave="mouseOut">
          <div class="acitve-right-t">
            <h3 class="acitve-title">基础知识</h3>
            <div class="active-li">
              <h4>知识点:</h4>
              <ul>
                <li v-for="item in getTwoCategorysList" :key="item.id">
                  {{ item.categoryName }}
                </li>
              </ul>
            </div>
          </div>
          <div class="active-right-b">
            <ul>
              <li v-for="item in getSearchList" :key="item.id">
                <img :src="item.courseCover" />
                <div class="active-title">{{ item.courseName }}</div>
                <div class="active-vip">
                  {{ courseTypeFn(item.courseLevel) }} · {{ item.clicks }}人报名
                </div>
                <div class="acitve-price">
                  <div>免费学习</div>
                  <div class="price-one">￥999</div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- 右边标签 -->
        <div class="box-navSwiper-right">
          <el-carousel
            :interval="3000"
            arrow="always"
            v-if="silderList.length > 0"
          >
            <el-carousel-item v-for="item in silderList" :key="item.id">
              <img :src="item.imageUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 轮播图下面 -->

      <ul class="box-bottom">
        <!-- 第一个图案 -->
        <li>
          <h3><img src="../../../assets/img/chuji.png" alt="" /></h3>
          <div>
            <h3>初级课程</h3>
            <span>入门课,岗位多</span>
          </div>
        </li>
        <li>
          <h3><img src="../../../assets/img/chuji.png" alt="" /></h3>
          <div>
            <h3>初级课程</h3>
            <span>入门课,岗位多</span>
          </div>
        </li>
        <li>
          <h3><img src="../../../assets/img/chuji.png" alt="" /></h3>
          <div>
            <h3>初级课程</h3>
            <span>入门课,岗位多</span>
          </div>
        </li>
        <li>
          <h3><img src="../../../assets/img/chuji.png" alt="" /></h3>
          <div>
            <h3>初级课程</h3>
            <span>入门课,岗位多</span>
          </div>
        </li>
        <li>
          <h3><img src="../../../assets/img/chuji.png" alt="" /></h3>
          <div>
            <h3>初级课程</h3>
            <span>入门课,岗位多</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
//element ui
import { ArrowRight } from "@element-plus/icons-vue";
import { onBeforeMount } from "@vue/runtime-core";
//api
import { getSliders } from "../../../utils/api/silder";
import {
  getFirstCategorys,
  getSecondCategorys,
  getSearch,
} from "../../../utils/api/coures";

//mixins混入
import courseType from "../../../mixins/course";
let { courseTypeFn } = courseType();

// 轮播图数据
let silderList = ref([]);
// 一级分类的数据
let getFirstCategorysList = ref([]);
// 二级分类的数据
let getTwoCategorysList = ref([]);
// 课程查询搜索数据
let getSearchList = ref([]);
// 控制li的显示与隐藏
let cccId = ref([""]);
// 右侧的信息隐藏
let isShow = ref(false);

// 生命周期
onBeforeMount(() => {
  // 轮播图数据
  getSliders().then((res) => {
    silderList.value = res.data.list;
    // console.log("ddddddddddddd", res);
  });

  //一级分类的数据
  getFirstCategorys().then((res) => {
    getFirstCategorysList.value = res.data.list;
    // console.log("2222222", res.data.list);
  });
});

//鼠标移入
const mouseHover = (id) => {
  isShow.value = true;
  cccId.value = id;
  // 二级分类的数据
  getSecondCategorys({
    categoryId: id,
  }).then((res) => {
    getTwoCategorysList.value = res.data.list;
    // console.log(res);
  });
  // 课程数据获取
  getSearch({
    // pageNum: 1,
    pageSize: 4,
    entity: {
      firstCategory: id,
      // secondCategory,
    },
  }).then((res) => {
    getSearchList.value = res.data.pageInfo.list;
    console.log("ddddddddddd", res.data);
  });
};
// 鼠标移出
const mouseOut = () => {
  isShow.value = false;
  cccId.value = "";
};
</script>

<style lang="scss" scoped>
.box {
  background: url("../../../assets/img/transitionbg.png") no-repeat;
  height: 600px;
}
.box-nav {
  // position: relative;
  width: 1100px;
  height: 600px;
  margin: 0 auto;
  padding-top: 40px;
  .box-navSwiper {
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    height: 400px;
    .box-navSwiper-left {
      // z-index: 222;
      // width: 10%;
      height: 400px;
      position: relative;
      & ul li {
        display: flex;
        justify-content: space-between;
        // float: left;
        padding-left: 10px;
        .icon {
          padding-right: 40px;
        }
      }
      .active {
        background: linear-gradient(
          50deg,
          #3fe5ff 0%,
          rgba(62, 222, 255, 0.93) 2%,
          rgba(60, 203, 255, 0.73) 9%,
          rgba(58, 186, 255, 0.56) 30%,
          rgba(57, 172, 255, 0.41) 40%,
          rgba(55, 160, 255, 0.28) 50%,
          rgba(54, 150, 255, 0.18) 60%,
          rgba(53, 142, 255, 0.1) 70%,
          rgba(53, 137, 255, 0.04) 80%,
          rgba(53, 133, 255, 0.01) 90%,
          rgba(53, 133, 255, 0) 100%
        );
      }
    }
    .acitve-right {
      // display: none;
      position: absolute;
      display: flex;
      margin-left: 21%;
      flex-direction: column;
      justify-content: space-around;
      left: 160px;
      width: 724px;
      height: 400px;
      z-index: 999;

      background: #ffffff;
      border: 0px 11px 0px 0px;
      // padding-left: 27px;

      .acitve-right-t {
        padding-top: 20px;
      }
      .acitve-title {
        padding-bottom: 15px;
        padding-left: 27px;
      }
      .active-li {
        display: flex;
        padding-left: 27px;
        & li {
          margin: 0 10px;
        }
      }
      .active-right-b {
        display: flex;
        // justify-content: space-around;
        width: 724px;
        height: 280px;
        background: #f3f5f6;
        & ul {
          display: flex;
          flex-wrap: wrap;
          // padding-bottom: 10px;
        }
        & ul li {
          background-color: #ffffff;
          margin: 10px;
          border-radius: 20px;
          width: 330px;
          height: 120px;

          & img {
            // display: flex;
            float: left;
            padding: 10px 10px;
            border-radius: 20px;
            width: 150px;
            height: 100px;
          }
          .active-title {
            font-size: 15px;
            font-weight: bold;
            padding: 20px 0 0 0;
          }
          .active-vip {
            padding: 13px 0 0 0;
            font-size: 14px;
          }
          .acitve-price {
            display: flex;
            // left: -40px;/
            // font-size: 22px;
            padding: 13px 15px 0 0;
            justify-content: space-between;
            .price-one {
              color: red;
            }
          }
        }
      }
    }
  }
}
.active-li > ul > li {
  // display: flex;
  // justify-content: space-around;
  float: left;
  margin-left: 20 px;
}
::v-deep .el-carousel__container {
  height: 400px;
}
.box-navSwiper-left > ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 220px;
  height: 100%;
  background: #322f49;
  border-radius: 11px 0px 0px 0px;
}
.box-navSwiper-left > ul > li {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 37px;
  font-size: 16px;
  color: #f2f2f2;
  cursor: pointer;
}

.box-navSwiper-right {
  width: 880px;

  & img {
    width: 100%;
    height: 100%;
  }
}
.box-bottom {
  display: flex;
  width: 1100px;

  & li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 133px;
    cursor: pointer;
    background: #ffffff;
    border-radius: 0px 0px 0px 11px;
    & img {
      width: 64px;
      height: 64px;
    }
    & div {
      margin-left: 11px;
      & h3 {
        font-size: 16px;
        color: #333333;
      }
      & span {
        font-size: 12px;
        color: #808080;
      }
    }
  }
}
</style>
